<template>
  <div class="about container">
    <template>
      <el-card class="box-card">
        <div class="clearfix">
          <span style="font-size:22px;">课后作业</span>
          <el-button id="add_group" style="float: right;" type="primary" @click="open">布置作业</el-button>
        </div>
      </el-card>

      <!-- 不知作业内容详情 -->
      <el-table
        :data="homework.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%"
      >
        <el-table-column label="序号" prop="ID"></el-table-column>
        <el-table-column label="作业标题" prop="name"></el-table-column>
        <!-- <el-table-column label="类型" prop="type"></el-table-column> -->
        <el-table-column label="布置时间">
          <template slot-scope="scope">
            {{scope.row.created_at | dateFrm}}
          </template>
        </el-table-column>
        <el-table-column align="right">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="提示" :visible.sync="dialogVisible" width="550px">
        <img :src="qrcodeUrl" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </div>
</template>

<script>
import {
  asyncdelteachertextitembank,
  asyncselectteachertextitembank
} from "../../../plugins/api";
import QRCode from "qrcode";
import moment from "moment";

export default {
  name: "about",
  data() {
    return {
      homework: [],
      search: "",
      qrcodeUrl: "",
      qrcode: {},
      dialogVisible: false
    };
  },
  methods: {
    open() {
      this.$router.push({ path: "/addteacheritembank" });
    },
    //----查看
    handleEdit(index, row) {
      console.log(index, row);
      console.log(111);
      this.dialogVisible = true;
      this.code = row;
      let self = this;

      const redirect_uri = encodeURIComponent(
        location.origin+"/wechat/answer"
      );
      const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc38a242cea953176&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=${row.ID}#wechat_redirect`;

      QRCode.toDataURL(url, function(err, url) {
        // console.log(err);
        if (!err) {
          self.qrcodeUrl = url;
        }
      });
    },
    handleDelete(index, row) {
      console.log(index, row);
      asyncdelteachertextitembank({
        ID: row.ID
      })
        .then(() => {
          asyncselectteachertextitembank().then(data => {
            this.homework = data;
          });
        })
        .catch(err => {
          console.log(err);
        });
      this.$message({
        message: "删除成功",
        type: "success"
      });
    },
    //关闭弹窗
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    }
  },
  async created() {
    this.homework = await asyncselectteachertextitembank();
    console.log(this.homework)
  },
  filters: {
    dateFrm: function(el) {
      return moment(el).format("YYYY-MM-DD HH:mm");
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-card.is-always-shadow {
  margin: 12px 0;
}
.el-dialog__body img{
  margin-left: 25%;
}
</style>
